<template>
  <div class="fund-detail">
    <div class="fund-detail-content" v-loading="loading">
      <div class="layout-item" style="width: 800px;margin: 0 auto;">
        <div class="title-wrap">
          <span class="title">股票市场</span>
          <!-- <el-input size="mini" v-model="searchText"></el-input> -->
        </div>
        <div class="layout-item-content">
          <FreeTable ref="freeTableRef" :config="tableConfig" :column="column" :data="tableData" @row-click="data => stock = data"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, reactive, toRefs } from 'vue'
import FreeTable from '@/components/FreeTable/index.vue';
import { getRiseAndFallColor } from '../utils/fun';
export default defineComponent({
  components: {
    FreeTable,
  },
  setup (props, { emit }) {
    const state: any = reactive({
      theme: {
        areaColor: "#424242",
        bg: "#222",
        borderColor: "#555",
        card: "#333",
        color: "#fff",
        line: "#555",
        topbar: "#444"
      },
      stock: null,
      dataList: [],
      tableConfig: {
        colWidth: 80,
        fontColor: '#fff',
        thBgColor: '#222',
        bgColor: '#000',
        // thAlign: 'center',
        align: 'center',
        currentRowBgColor: '#333',
        spaceText: '-',
        rowKey: 'f12',
        border: true,
        borderColor: '#555',
        fixedBgColor: '',
      },
      column: [
        {
          name: '全选',
          type: 'selection',
          align: 'center',
          selectAll: true,
          width: 40,
          fixed: true
        },
        {
          name: '序号',
          type: 'index',
          align: 'center',
          width: 40,
          fixed: true,
        },
        {
          name: '代码',
          prop: 'f12',
          fixed: true,
          sort: true
        },
        {
          name: '名称',
          prop: 'f14',
          sort: true,
          fixed: true
        },
        {
          name: '最新价',
          prop: 'f2',
          dynamicHighlighting: true,
          color(row: any) {
            return getRiseAndFallColor(row.f4, 0);
          },
          sort: true,
        },
        {
          name: '涨跌幅',
          prop: 'f3',
          color(row: any) {
            return getRiseAndFallColor(row.f4, 0);
          },
          render(row: any) {
            return row.f3 != '-' ? row.f3 + '%' : row.f3;
          }
        },
        {
          name: '涨跌额',
          prop: 'f4',
          dynamicHighlighting: true,
          color(row: any) {
            return getRiseAndFallColor(row.f4, 0);
          }
        },
        {
          name: '成交量(手)',
          prop: 'f5',
          autoUnit: true
        },
        {
          name: '成交额',
          prop: 'f6',
          // divisor: 100000000,
          // toFixed: 2,
          // unit: '万',
          autoUnit: true,
          // thousandth: true,
          // render(row: any) {
          //   let val = row.f6;
          //   if (val && val > 10000) {
          //     let f = '万';
          //     val = (val / 10000);
          //     if (val > 10000) {
          //       f = '亿';
          //       val = (val / 10000);
          //     }
          //     val = val.toFixed(2) + f;
          //   }
          //   return val;
          // }
        },
        {
          name: '振幅',
          prop: 'f7'
        },
        {
          name: '最高',
          prop: 'f15',
          color(row: any) {
            return getRiseAndFallColor(row.f15, row.f18);
          }
        },
        {
          name: '最低',
          prop: 'f16',
          color(row: any) {
            return getRiseAndFallColor(row.f16, row.f18);
          }
        },
        {
          name: '今开',
          prop: 'f17',
          color(row: any) {
            return getRiseAndFallColor(row.f17, row.f18);
          },
        },
        {
          name: '昨收',
          prop: 'f18',
        },
        {
          name: '量比',
          prop: 'f10',
        },
        {
          name: '换手率',
          prop: 'f8'
        },
        {
          name: '市盈率(动态)',
          prop: 'f9',
          // fixed: 'right'
        },
        {
          name: '市净率',
          prop: 'f23',
          // fixed: 'right'
        }
      ],
      loading: false,
      freeTableRef: null,
      stockChartRef: null,
      stockInfoRef: null,
      searchText: '',
      tableData: computed(() => {
        if (state.searchText.trim()) {
          return state.dataList.filter((item: any) => {
            return item?.f12?.includes(state.searchText) || item?.f14?.includes(state.searchText);
          })
        } else {
          return state.dataList;
        }
      })
    })

    getAllStock();
    const stockMarketInter = setInterval(() => {
      getAllStock(false);
    }, 5 * 1000);

    onBeforeUnmount(() => {
      clearInterval(stockMarketInter);
    })
    let timer: any = null;
    window.addEventListener('resize', () => {
      requestAnimationFrame(() => {
        state.freeTableRef.resize();
        state.stockInfoRef.resize();
      });
      clearTimeout(timer);
      timer = setTimeout(() => {
        state.stockChartRef.resize();
      }, 100);
    })

    function getAllStock(loading = true) {
      state.loading = loading;
      var cb = 'jQuery1124013606078235077512_' + Date.now();
      (window as any)[cb] = (data: any)=>{
        state.dataList = data.data.diff.map((item: any) => {
          item.c_market_no = getStockMark(item.f12);
          item.vc_report_code = item.f12;
          item.vc_stock_name = item.f14;
          // if (item.f3) {
          //   item.f3 += '%';
          // }
          item.f2 += Math.random() > 0.5 ? 1 : -1;
          return item;
        });

        if (!state.stock) {
          state.stock = state.dataList[0];
        }
        (window as any).runtime = Date.now();
        // state.dataList = state.dataList.concat(state.dataList);
        // state.dataList = state.dataList.concat(state.dataList);
        // state.dataList = state.dataList.concat(state.dataList);
        // state.dataList = state.dataList.concat(state.dataList);
        // state.dataList = state.dataList.concat(state.dataList);
        console.log(Date.now() - (window as any).runtime);
        // console.log(state.dataList);
        
        delete (window as any)[cb];
        state.loading = false;
      }
      var url = `https://${10 + Math.floor(Math.random()*90)}.push2.eastmoney.com/api/qt/clist/get?cb=${cb}&pn=1&pz=6000&po=1&np=1&ut=bd1d9ddb04089700cf9c27f6f7426281&fltt=2&invt=2&dect=1&wbp2u=|0|0|0|web&fid=f3&fs=m:0+t:6,m:0+t:80,m:1+t:2,m:1+t:23,m:0+t:81+s:2048&fields=f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f12,f13,f14,f15,f16,f17,f18,f20,f21,f23,f24,f25,f22,f11,f62,f128,f136,f115,f152&_=${Date.now()}`
      var script = document.createElement('script');
      script.src = url;
      script.id = cb;
      document.body.append(script);
      setTimeout(() => {
        document.getElementById(cb)?.remove();
      }, 300);
    }

    function getStockMark(stockCode: string) {
      if (['600', '601', '603', '900', '688'].includes(stockCode.substring(0, 3))) return '1';
      if (['000', '002', '300', '200'].includes(stockCode.substring(0, 3))) return '2';
      return '2';
    }

    function close() {
      emit('close');
    }
    return {
      ...toRefs(state),
      close
    }
  }
})
</script>

<style lang='scss' scoped>
.fund-detail {
  background-color: #000;
  color:  #fff;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  :deep() {
    .title-wrap {
      background: #222;
      border-bottom: 1px solid #666;
      .title {
        display: inline-block;
        padding: 5px 10px;
        background: #555;
      }
    }
    .el-loading-mask {
      background-color: transparent;
    }
  }
}
.header {
  height: 50px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-icon-close {
  cursor: pointer;
}
.fund-detail-content {
  flex: 1;
  display: flex;
  font-size: 14px;
  overflow: hidden;
  .title-wrap {
    border-bottom: 0;
  }
  .layout-item {
    border-right: 0;
  }
}
.layout-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #333;
  overflow: hidden;
  &:last-of-type {
    border-right: 0;
  }
  .layout-item-content {
    flex: 1;
    overflow: hidden;
  }
}
</style>